{% load static i18n %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
  <head>
    {% include 'includes/head.html' %}
    <link type="text/css" href="{% static 'css/public.css' %}" rel="stylesheet">
    {% block extrahead %}{% endblock %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  </head>
  <body>

    <nav class="custom-navbar">
      <div class="d-flex justify-content-between align-items-center">
        
        <!-- LOGO -->
        <a href="{% url 'index' %}" class="navbar-brand text-light fs-3">
          <img src="{% static 'assets/img/l2_logo.png' %}" height="60" alt="{% trans 'Lineage2 Logo' %}">
        </a>
    
        <!-- MENU DESKTOP -->
        <ul class="nav custom-menu d-none d-lg-flex">
          <li class="nav-item"><a class="nav-link" href="{% url 'index' %}#features" onclick="closeMenu()">{% trans "Sobre" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'index' %}#download" onclick="closeMenu()">{% trans "Download" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'index' %}#comunidade" onclick="closeMenu()">{% trans "Comunidade" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'public_news_list' %}" onclick="closeMenu()">{% trans "Notícias" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'public_faq_list' %}" onclick="closeMenu()">{% trans "FAQ" %}</a></li>
        </ul>
    
        <!-- AÇÕES -->
        <div class="d-none d-lg-flex gap-3">
          {% if request.user.is_authenticated %}
            <a href="{% url 'dashboard' %}" class="highlight-btn">{% trans "Painel" %}</a>
            <a href="{% url 'logout' %}" class="custom-btn">{% trans "Sair" %}</a>
          {% else %}
            <a href="{% url 'login' %}" class="custom-btn">{% trans "Minha Conta" %}</a>
            <a href="{% url 'register' %}" class="highlight-btn">{% trans "Jogue Grátis" %}</a>
          {% endif %}
        </div>
    
        <!-- BOTÃO MOBILE -->
        <button class="btn btn-outline-light d-lg-none custom-toggle" id="menu-toggle">
          ☰
        </button>
      </div>
    
      <!-- MENU MOBILE -->
      <div class="custom-menu d-lg-none" id="mobile-menu">
        <button class="custom-close" onclick="toggleMenu()">
          &times;
        </button>
        <ul class="nav flex-column align-items-center">
          <li class="nav-item"><a class="nav-link" href="{% url 'index' %}#features" onclick="closeMenu()">{% trans "Sobre" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'index' %}#download" onclick="closeMenu()">{% trans "Download" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'index' %}#comunidade" onclick="closeMenu()">{% trans "Comunidade" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'public_news_list' %}" onclick="closeMenu()">{% trans "Notícias" %}</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'public_faq_list' %}" onclick="closeMenu()">{% trans "FAQ" %}</a></li>

          {% if request.user.is_authenticated %}
            <li class="nav-item mt-4"><a href="{% url 'dashboard' %}" class="highlight-btn text-center">{% trans "Painel" %}</a></li>
            <li class="nav-item mt-2"><a href="{% url 'logout' %}" class="custom-btn text-center">{% trans "Sair" %}</a></li>
          {% else %}
            <li class="nav-item mt-4"><a href="{% url 'login' %}" class="custom-btn-green text-center">{% trans "Minha Conta" %}</a></li>
            <li class="nav-item mt-2"><a href="{% url 'register' %}" class="highlight-btn text-center">{% trans "Jogue Grátis" %}</a></li>
          {% endif %}
        </ul>
      </div>
    </nav>
    

    <!-- Conteúdo principal -->
    {% block content %}{% endblock %}

    <!-- Rodapé -->
    <footer>
      <div class="container">
        <div class="social-icons">
          <a href="#" title="Discord"><i class="fab fa-discord"></i></a>
          <a href="#" title="YouTube"><i class="fab fa-youtube"></i></a>
          <a href="#" title="Facebook"><i class="fab fa-facebook"></i></a>
          <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
        </div>
        <p>&copy; <span id="footer-year"></span> Lineage 2 PDL - {% trans "Todos os direitos reservados." %}</p>
        <p>{% trans "Feito com ❤️ por aventureiros para aventureiros." %}</p>
      </div>
    </footer>    

    {% include 'includes/scripts.html' %}
    <script src="{% static 'assets/js/public.js' %}"></script>
  </body>
</html>
